<script setup>
import { useTemplateRef } from 'vue'

/** 暴露函数 */

defineExpose({
  removeAnimate,
  addAnimate,
})

/** 动画 */

const ani001 = useTemplateRef('ani-001')
const ani002 = useTemplateRef('ani-002')

function removeAnimate() {
  // 移除所有动画类
  ani001.value.classList.remove('animate__backInLeft')
  ani002.value.classList.remove('animate__slideInDown')
}

function addAnimate() {
  // 添加动画类
  // 下一帧重新添加动画类
  requestAnimationFrame(() => {
    ani001.value.classList.add('animate__backInLeft')
    ani002.value.classList.add('animate__slideInDown')
  })
}
</script>
<template>
  <div class="box">
    <p class="title animate__animated" ref="ani-001">『加入优势』</p>
    <ul class="text animate__animated" ref="ani-002">
      <li>提升书写水平——专业指导+定期练习，助你练就一手好字，作业笔记颜值飙升！</li>
      <li>零基础友好——从握笔到创作循序渐进，小白也能轻松入门，享受笔墨乐趣。</li>
      <li>免费资源福利——笔墨纸砚社团提供，经典字帖随意借，省钱又省心。</li>
      <li>静心修身养性——在快节奏生活中沉淀自我，培养专注力与耐心。</li>
      <li>丰富校园生活——书法展、春联大赛、跨校交流…收获技能+朋友+综测加分！</li>
    </ul>
  </div>
</template>
<style scoped>
.box {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 90%;
  height: 90%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  font-family: 'wangxizhi';
}

.title {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.text {
  font-size: 0.4rem;
  line-height: 1.5;
  padding: 1rem;
  text-indent: 2em;
  background: #f5f5dc;

  list-style: none; /* 移除默认的圆点 */
  text-indent: 0;
}

.text li {
  margin-bottom: 0.2rem;
}

.text li::before {
  content: '✨';
}
</style>
